@import "../_function";
@import "../_variables";

.address-input {
	position: relative;
	&.default {
		.address-border {
			&::after {
				background: #0098e9;
			}
		}
	}
	&.success {
		.address-border {
			&::after {
				width: 100%;
				left: 0;
				background: #28f900;
			}
		}
	}
	&.error {
		.address-border {
			&::after {
				width: 100%;
				left: 0;
				background: #ff000f;
			}
		}
	}
	.address-label {
		display: flex;
		height: pr(150);
		align-items: center;
		justify-content: space-between;
		padding: 0 pr(5);
		font-size: pr(40);
	}
	.address-label-text {
		width: pr(200);
		overflow: hidden;
	}
	.address-label-input {
		flex: 1;
		margin-left: pr(30);
		border: none;
		height: 100%;
		font-size: inherit;
		padding-right: pr(30);
		letter-spacing: 1px;
		&::placeholder {
			color: #797979;
		}
	}
	.address-label-input:focus + .address-border {
		&:after {
			left: 0;
			width: 100%;
		}
	}
	
	.address-border {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1px;
		width: 100%;
		background: #ddd;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 0;
			height: 100%;
			transition: all .5s;
		}
	}
}
